<template>
  <div class="transfer_page">
    <CommonHeader title="转账" />
    <div class="transfer_content page_no_tab_bar">
      <!-- 币种 -->
      <div class="input_box">
        <div class="input_label">币种</div>
        <div class="input">
          <select name="" id="" v-model="ruleForm.coinName" placeholder="请选择币种">
            <option v-for="(item,index) in coinsList" :key="index" :value="item.coinName">{{item.coinName}}</option>
          </select>
        </div>
        <div class="input_rule"></div>
      </div>
      <!-- 可用资产 -->
      <div class="input_box">
        <div class="input_label">可用资产： {{allAssets || 0}}</div>
        <div class="input input_two">
          <input
            type="text"
            v-model="ruleForm.amount"
            placeholder="请输入转账数量"
          />
          <span class="add_text" @click="getMax">Max</span>
        </div>
        <div class="input_rule"></div>
      </div>
      <!-- 用户ID -->
      <div class="input_box">
        <div class="input_label">用户ID</div>
        <div class="input">
          <input
            type="text"
            v-model="ruleForm.userId"
            placeholder="请输入用户ID"
          />
        </div>
        <div class="input_rule"></div>
      </div>
      <!-- 交易密码 -->
      <div class="input_box">
        <div class="input_label">交易密码</div>
        <div class="input">
          <input
            type="text"
            v-model="ruleForm.pwd"
            placeholder="请输入交易密码"
          />
        </div>
        <div class="input_rule"></div>
      </div>
      <!-- 确定按钮 -->
       <div class="operate_btn" @click="onConfirm">确定</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {onMounted, ref } from 'vue'
import CommonHeader from "@/components/CommonHeader.vue";
import { useRoute ,useRouter} from 'vue-router';
import { getAssets, transferOut } from '@/api/assets';
import { ElMessage } from 'element-plus';

// 获取路由对象
const route = useRoute()
const router = useRouter()
const allAssets = ref()

// 表单数据
const ruleForm = ref({
  coinName: "USDT",
  amount: "",
  userId: "",
  pwd: ""
})

// 币种列表
const coinsList = ref()

// 最大值
const getMax = () => {
  ruleForm.value.amount = allAssets.value
}

// 确定
const onConfirm = () => {
  transferOut(ruleForm.value).then((res: any) => {
    ElMessage.success("转账成功！")
    router.replace("/assets")
  })
}

// 获取数据
const getData = () => {
  getAssets().then((res: any) => {
    coinsList.value = res.data.spotList
    // ruleForm.value.coinName = coinsList.value[0].coinName
  })
}

// 初始化数据
onMounted(() => {
  allAssets.value = route.query.data;
  getData()
})
</script>

<style lang="scss" scoped>
.transfer_page {
  .transfer_content {
    padding-top: 10px;
    .input_box {
      margin-bottom: 20px;
      .input_label {
        margin-bottom: 10px;
      }
      .input {
        width: 100%;
        height: 50px;
        background-color: #141515;
        margin: 5px 0;
        border-radius: 5px;
        input,
        select {
          width: 100%;
          height: 100%;
          font-size: 18px;
          padding: 0 5px;
          background-color: #141515;
          color: #babcbf;
          border-radius: 5px;
        }
      }
      .input_two {
        display: flex;
        input {
          flex: 1;
        }
        span {
          display: flex;
          align-items: center;
          padding: 0 10px;
        }
      }
    }
    .operate_btn {
      margin-top: 50px;
    }
  }
}
</style>
